// 公司动态
<template>
  <div class="Company-dynamics" style="height: 100%">
    <el-card style="width: 670px; height: 900px; float: left">
      <!-- 左侧 -->
      <div
        v-for="item in articleTable"
        :key="item.id" 
        style="padding: 0px; margin: 0px"
      >
        <!-- 左边图片部分 -->
        <el-row type="flex" class="row-bg">
          <el-col>
            <!-- 右边标题和简介 -->
            <div class="article-mid">
              <router-link :to="'/home/newsinfo/' + item.id">
                <h2 style="color: black">
                  {{ item.articleTitle }}
                </h2> </router-link
              ><br />
              <p class="intro">
                {{ item.articleExplain }}
              </p>
              <!-- 文章简介下四个显示的小标签 -->
              <div class="display-function">
                <el-tag size="medium" type="info" style="margin-right: 2px"
                  >点赞数量:{{ item.sumPraises }}</el-tag
                >
                <el-tag size="medium" type="info" style="margin-right: 2px"
                  >评论数量:{{ item.sumCom }}</el-tag
                >
                <el-tag size="medium" type="info" style="margin-right: 2px"
                  >阅读数量:{{ item.sumRead }}</el-tag
                >
                <el-tag size="medium" type="info" style="margin-right: 2px"
                  >发布日期:{{ getDate(item.createdTime) }}</el-tag
                >
              </div>
            </div>
          </el-col>
        </el-row>
        <hr />
      </div>
    </el-card>
    <!-- 右侧 -->
    <div class="model-right">
      <div class="right-header" style="width: 22.67px; height: 22.67px">
        <img :src="iii" style="height: 22.67px; width: 22.67px" />
      </div>
      <div
        style="
          border-bottom: 0.02rem solid #d6d6d6;
          padding-bottom: 0.4rem;
          margin-bottom: 15px;
        "
      >
        <p class="tit">最新动态</p>
      </div>
      <!-- 右侧正文 -->
      <div class="block" v-for="ss in articleTable" :key="ss.id">
        <el-timeline>
          <el-timeline-item :timestamp="getDate(ss.createdTime)" placement="top">
            <router-link :to="'/home/newsinfo/' + ss.id">
              <p class="right-intro">{{ ss.articleTitle }}</p>
            </router-link>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
import { byArtTypeGetArticle } from "../api/read";
import common from "../uitls/common";
export default {
  data() {
    return {
      getDate:common.getDate,
      iii: require("./img/zxgx_tit.jpg"),
      // 文章数组
      articleTable: [],
      ArticleTypeNames: {
        articleTypeName: "公司动态",
      },
      //图片地址
      sss: [],
    };
  },
  //自定义prop
  props: ["ArticleTypeId"],
  mounted() {
    this.getArticleType();
  },
  methods: {
    load() {
      this.count += 1;
    },
    getArticleType() {
      byArtTypeGetArticle(this.ArticleTypeNames)
        .then(({ data }) => {
          console.log(data.data);
          let newArr = data.data;
          newArr.reverse();
          this.articleTable = newArr;
        })
        .catch((err) => {
          console.log(err);
        });
      console.log(this.ArticleTypeId);
    },
  },
};
</script>

<style>
/* 左侧宽度 */
.model-left {
  width: 300px;
  float: left;
  color: #4252729f;
}
/* 右侧宽度 */
.model-right {
  width: 320px;
  height: 800px;
  float: right;
  margin-right: 100px;
}
.right-header {
  background-color: #21b8dd;
  float: left;
  margin: 0;
  padding: 0;
}

/* 最新动态 */
.model-right .tit {
  font-size: 0.88rem;
  /* line-height: 0.3rem; */
  color: #0d5c70;
  /* text-indent: 0.18rem; */
  padding-left: 46px;
  margin: 0%;
  height: 1.7rem;
}

.el-timeline-item {
  border-left: 1px solid #cfcfcf;
  margin-left: 10px;
  /* padding-bottom: 0.2rem; */
}

.el-timeline-item__content {
  margin-left: -10px;
  color: #303133;
  /* font-size: 14px; */
  line-height: 16px;
  overflow: hidden;
  /* height: 40px; */
  /* margin-bottom: 3px; */
}

/* 右侧时间栏字体 */
.right-intro {
  font-size: 14px;
  overflow: hidden;
  /* height: 20px !important; */
  padding-left: 10px;
  color: rgb(26, 18, 18);
}
/* 时间栏的小圆圈 */
.el-timeline-item__node--normal {
  left: -6px !important;
}
</style>